<template>
  <div class="table-main">
    <div class="tab-search my_tab_head">
      <div class="search-cont">
        <div class="search-name">商品名称:</div>
        <el-input v-model="searchFrom.goodName" placeholder="请输入内容"></el-input>
      </div>
      <div class="search-cont">
        <div class="search-name">商品状态:</div>
        <el-select v-model="myShopStatus" placeholder="请选择" @change="handChangeType">
          <el-option
            v-for="item in shopStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="search-cont">
        <div class="search-name">店铺名称:</div>
        <el-select filterable v-model="searchFrom.shops" placeholder="请选择">
          <el-option
            v-for="item in findAllsList"
            :key="item.id"
            :label="item.shopName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="search-btns">
        <el-button type="primary" size="small" @click="handSearch()">查询</el-button>
        <el-button size="small" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="hadn-new">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handAdd()">新建</el-button>

      <el-popconfirm title="确定删除吗?" @onConfirm="onConfirm">
        <el-button slot="reference" size="small" icon="el-icon-minus" @click="handSeleDel">删除</el-button>
      </el-popconfirm>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handMultAdd()">多商品新建</el-button>
      <!-- <el-button size="small" icon="el-icon-minus" @click="handSeleDel">删除</el-button> -->
    </div>
    <div class="hand-btns">
      <span class="el-icon-warning" style="color:#38AD93;"></span>
      <span class="btns-title">
        已选择
        <span style="color:#38AD93;">{{ multipleSelection.length }}</span> 项
      </span>
      <span class="btns-clos pointer" @click="handSeleColse">清空</span>
      <div class="fun_box">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
          <span class="el-icon-refresh init" @click="init()"></span>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出表格" placement="top-start">
          <span class="el-icon-printer dow_up" @click="handDowUp"></span>
        </el-tooltip>
        <!-- <el-tooltip
          class="item"
          effect="dark"
          content="打印"
          placement="top-start"
        >
          <span class="el-icon-printer dow_up" v-print="'#printTest'"></span>
        </el-tooltip>-->
        <el-dropdown>
          <div
            style="width:45px;height:32px;text-align:center;line-height:32px;backgroundColor:#fff;margin-left:22px;"
          >
            <i class="el-icon-s-fold"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>暂无更多</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div id="printTest">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="goodName" label="商品名字" show-overflow-tooltip width="225">
          <template slot-scope="scope">
            <span class="goods_title">{{ scope.row.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="商品所属店铺" show-overflow-tooltip width="225">
          <template slot-scope="scope">
            <span class="goods_title">{{ scope.row.shopName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品缩略图">
          <template slot-scope="scope">
            <el-image
              style="width: 66px; height: 66px"
              :src="scope.row.mainImg"
              :preview-src-list="scope.row.newMainImg"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="是否包邮">
          <template slot-scope="scope">
            {{
            scope.row.isFreeShipping == 1 ? "包邮" : "不包邮"
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="促销信息" prop="goodsTips"></el-table-column> -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div class="tag_g">
              <el-tag v-if="scope.row.isHot == 1" type="success">热销商品</el-tag>
              <el-tag v-if="scope.row.isNew == 1" type="success">新品</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shopAtive" label="操作" show-overflow-tooltip width="280">
          <template slot-scope="scope">
            <div class="shop_btns">
              <div>
                <el-button type="text" @click="handAddSpecification(scope.row)">添加规格</el-button>
                <el-button type="text" @click="handDetail(scope.row)">详情</el-button>
                <el-button type="text" @click="handEdit(scope.row)">编辑</el-button>

                <el-popover
                  placement="top"
                  width="160"
                  trigger="click"
                  :ref="'popover-' + scope.row.id"
                  style="margin-left:10px;"
                >
                  <p>确定删除?</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="handPopClos(scope.row)">取消</el-button>
                    <el-button type="primary" size="mini" @click="handPopDel(scope.row)">确定</el-button>
                  </div>
                  <el-button type="text" @click="handDel(scope.row)" slot="reference">删除</el-button>
                </el-popover>
              </div>
              <div>
                <el-switch
                  @change="handIsPutChange(scope.row)"
                  v-model="scope.row.isPut"
                  active-color="#13ce66"
                  active-text="是否上架"
                ></el-switch>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pags_box">
      <el-pagination
        @size-change="handBidleSizeChange"
        @current-change="handBidleCurrentChange"
        :current-page="pageBid.start"
        :page-sizes="[5, 10, 15]"
        :page-size="pageBid.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBid.totalCount"
      ></el-pagination>
    </div>
    <shopDig :isState="isState" ref="shopDig"></shopDig>

    <addSpecification :specId="specId" ref="addSpecificationDig"></addSpecification>
    <multiGoods ref="multiGoods"></multiGoods>
    <moreImg :isState="isState" ref="moreImg"></moreImg>
  </div>
</template>

<script>
import axios from 'axios'
import shopDig from './shopDig/index'
import multiGoods from './multiGoods/index'
import addSpecification from './addSpecification/index'
import moreImg from './moreImg/index'
import { parseTime } from '@/utils'
export default {
  name: 'SidebarLogo',
  components: {
    shopDig,
    addSpecification,
    multiGoods,
    moreImg
  },
  data() {
    return {
      value2: false,
      specId: '',
      dialogVisible: false,
      title: '茶城通',
      value1: '',
      myShopStatus: '',
      logo:
        'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
      searchFrom: {
        goodName: '',
        shops: ''
      },
      shopStatusOptions: [
        {
          label: '新品',
          value: 4
        },
        {
          label: '热销',
          value: 5
        },
        {
          label: '全部',
          value: 0
        }
      ],
      tableData: [],
      multipleSelection: [],
      loading: true,
      pageBid: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 0
      },
      isState: 0,
      form: {},
      ids: '',
      isShowLod: false,
      isShowLod2: false,
      findAllsList: []
    }
  },
  async mounted() {
    this.loading = true
    this.$api
      .getFindGoodsByPage({
        page: this.pageBid.start,
        limit: this.pageBid.limit
      })
      .then(res => {
        console.log(res, '商品首页表格')
        this.loading = false
        this.tableData = res.data.data
        this.pageBid.totalCount = res.data.count
        this.tableData.forEach(item => {
          item.price = item.price == null ? '0' : item.price
          item.stock = item.stock == null ? '0' : item.stock
          item.isPut = item.isPut == 1 ? true : false
          if (item.mainImg != null) item.newMainImg = item.mainImg.split(',')
        })
      })
      .finally(() => {
        this.loading = false
      })
    this.findAllsList = (await this.$api.userByShop()).data.data
  },
  // userByShop
  methods: {
    handRrint() {},
    handMoreImg(row) {
      // this.$refs.moreImg.imgDia = true;
      this.isState = 1
      this.form = row
      this.$refs.moreImg.handGetList()
      this.$refs.moreImg.handGetShop(row.id)
      this.$refs.moreImg.dialogVisible1 = true
    },
    handMultAdd() {
      this.$refs.multiGoods.dialogVisibleMulti = true
      this.$refs.multiGoods.handGetList()
    },
    formatJson(filterVal) {
      return this.tableData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    //导出表格
    handDowUp() {
      if (this.tableData.length == 0) {
        this.$message({
          message: '暂无数据'
        })
        return
      }
      this.loading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品名称', '促销信息', '状态']
        const filterVal = ['goodName', 'goodsTips', 'isPut']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '茶城通'
        })
        this.loading = false
      })
    },
    handSearch() {
      this.init(this.searchFrom)
    },
    //搜索
    handChangeType(val) {
      let newName = this.searchFrom.goodName
      this.searchFrom = {}
      this.$set(this.searchFrom, 'goodName', newName)
      this.searchId = val
      switch (val) {
        case 1:
          this.searchFrom.isPut = 1
          break
        case 2:
          this.searchFrom.isPut = 2
          break
        case 3:
          this.searchFrom.isRecom = 1
          break
        case 4:
          this.searchFrom.isNew = 1
          break
        case 5:
          this.searchFrom.isHot = 1
          break
        case 6:
          this.searchFrom.isHot = 1
          break
        default:
          this.searchFrom.isPut = ''
      }
      // let goodName = this.searchFrom == {}
      // Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。
    },
    handIsPutChange(item) {
      console.log(item.isPut, '是否上架')
      let newItem = JSON.stringify(item)
      let myFrom = {
        isPut: JSON.parse(newItem).isPut == true ? 1 : 2,
        id: item.id
      }
      this.$api.getSysEditGoods(myFrom).then(res => {
        this.dialogVisible1 = false
        if (res.data.code == 200) {
          console.log(res, '上架', myFrom)

          this.init()
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        }
      })
    },
    //添加规格
    handAddSpecification(row) {
      this.specId = row.id
      this.$refs.addSpecificationDig.dialogVisible3 = true
      console.log(this.$refs.addSpecificationDig.dialogVisible3, 'a')
      this.isShowLod = this.$refs.addSpecificationDig.dialogVisible3
      this.$refs.addSpecificationDig.handGetByGoodId(row.id)
    },
    //清空选中
    handSeleColse() {
      this.$refs.multipleTable.clearSelection()
    },
    closeFrom() {
      // for (let key in this.form) {
      //   this.form[key] = ''
      // }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handAdd() {
      this.isState = 0
      this.$refs.shopDig.handGetList(1)
      this.$refs.shopDig.dialogVisible1 = true
    },

    reset() {
      this.myShopStatus = ''
      for (let key in this.searchFrom) {
        this.searchFrom[key] = ''
      }
      this.init()
    },
    handDetail(row) {
      this.isState = 3
      this.form = row
      this.$refs.shopDig.handGetList()
      this.$refs.shopDig.handGetShop(row.id)
      this.isShowLod2 = true
      this.$refs.shopDig.dialogVisible1 = true
    },
    handEdit(row) {
      this.isState = 1
      this.form = row
      this.$refs.shopDig.handGetList()
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.dialogVisible1 = true
    },
    handPopClos(row) {
      this.$refs[`popover-` + row.id].doClose()
    },
    handPopDel(row) {
      this.$api.getSysDelGoodss({ id: row.id }).then(res => {
        console.log(res, '删除')
        if (res.data.code == 200) {
          // this.$message(res.data.message)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.$refs[`popover-` + row.id].doClose()
          this.init()
        }
      })
    },
    handDel(row) {
      // row.visible2 = true
      this.$set(row, 'visible2', true)
    },
    init(searchObj) {
      if (searchObj == '' || !searchObj) {
        searchObj = ''
      }
      this.loading = true
      this.$api
        .getFindGoodsByPage({
          page: this.pageBid.start,
          limit: this.pageBid.limit,
          searchObj: this.searchFrom
        })
        .then(res => {
          console.log(res, '商品')
          this.loading = false
          this.tableData = res.data.data
          this.pageBid.totalCount = res.data.count
          this.tableData.forEach(item => {
            item.price = item.price == null ? '0' : item.price
            item.stock = item.stock == null ? '0' : item.stock
            item.isPut = item.isPut == 1 ? true : false
            if (item.mainImg != null) item.newMainImg = item.mainImg.split(',')
          })
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //多选删除
    handSeleDel() {},
    onConfirm() {
      if (this.ids != '') {
        this.$api.getSysDelGoodss({ id: this.ids }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.init()
          }
        })
      } else {
        this.$message('请至少选择一条')
      }
      console.log('queding')
    },
    onCancel() {},
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.id)
      })
      this.ids = this.multipleSelection.join(',')
      console.log(this.multipleSelection.join(','), '多选')
    },
    handBidleSizeChange(val) {
      this.pageBid.limit = val
      this.init()
    },
    handBidleCurrentChange(val) {
      this.pageBid.start = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.banner_img_box {
  // display: flex;
  // align-items: center;
}
.banner_img {
  width: 66px;
  height: 66px;
}
.goods_title {
  margin-left: 5px;
  color: #38ad93;
}
.my_tab_head /deep/ .el-input.el-input--medium,
.my_tab_head /deep/ .el-input.el-input--medium .el-input__inner {
  width: 200px;
}
.shop_btns .el-button {
  color: #38ad93 !important;
}
.sige_box {
  display: flex;
  align-items: center;

  .sige {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    // background: rgba(82, 196, 26, 1);
    display: block;
    margin-right: 7px;
  }
}

.table-main {
  background-color: #fff;

  .hand-btns {
    height: 40px;
    border: 1px solid rgba(56, 173, 147, 0.17);
    line-height: 40px;
    border: 5px;
    background-color: #ebf6f4;
    padding: 0 16px;
    .btns-title {
      color: #000000;
      font-size: 14px;
      margin: 0 14px;
    }
    .btns-clos {
      color: #4eb69f;
      font-size: 14px;
    }
  }
  .hadn-new {
    margin-bottom: 24px;
  }
  .search-btns {
    // display: flex;
    // align-content: center;
    // margin-left: 30px;
    .search-btn {
      width: 65px;
      height: 32px;
      background: rgba(56, 173, 147, 1);
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-right: 8px;
    }
    .search-reset {
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }
  .tab-search {
    display: flex;
    align-content: center;
    margin-bottom: 28px;
    // .search-cont:first-child {

    // }
    .search-cont {
      /deep/ .el-select.el-select--medium {
        width: 100%;
      }
      margin-right: 10px;
      display: flex;
      align-content: center;
      line-height: 32px;
      .search-name {
        font-size: 14px;
        white-space: nowrap;
        color: #000;
        margin-right: 12px;
      }
    }
  }
}
</style>
